<template>
  <Select style="width: 100%" :options="options" v-bind="getAttrs">
    <template #default="{ item }">
      <slot :item="item"></slot>
    </template>
  </Select>
</template>

<script setup lang="ts" name="ApiSelect">
import Select from "../Select/index.vue";
import { computed, onMounted, PropType, ref, useAttrs } from "vue";
import { omit } from "lodash";
const props = defineProps({
  requestApi: {
    type: Function as PropType<(params) => Promise<Array<any>>>
  },
  requestAuto: {
    type: Boolean,
    default: true
  },
  params: {
    type: Object
  },
  callback: {
    type: Function as PropType<(res: Array<any>) => Array<any>>
  }
});
const options = ref([]);
const attrs = useAttrs();
const getAttrs = computed(() => {
  return { ...attrs, ...omit(props, ["requestApi", "params"]) };
});
onMounted(() => {
  if (props.requestAuto) {
    fetch();
  }
});
const fetch = async () => {
  const res = await props.requestApi!(props.params);
  if (props.callback) {
    options.value = props.callback(res);
  } else {
    options.value = res;
  }
};
</script>

<style scoped></style>
